<template>
  <div
    class="bg-white flex dark:bg-zinc-900 sticky top-0 left-0 z-10 animate__animated animate__fadeInDown"
  >
    <div class="flex items-center">
      <div class="logo text-xl">
        <img class="w-3 h-3" src="../../../../assets/logo.gif" alt="" />
      </div>
      <div class="title text-lg">个人博客</div>
    </div>
    <ul
      ref="ulRef"
      class="relative flex left-2 overflow-x-hidden px-1 py-1 text-xs text-zinc-600overflow-hidden navigation-list"
    >
      <li
        class="shrink-0 px-1.5 py-1 z-10 duration-200 cursor-pointer"
        v-for="(k, index) in useNavigationStore.HeaderData"
        :key="k.id"
        @click="SiderFunction(index, k.path)"
      >
        <i :class="k.icon"></i>
        {{ k.category }}
      </li>
      <!--右侧导航按钮-->
      <li
        class="fixed top-1 duration-200 right-[-1px] mt-[-2px] h-4 p-1 flex items-center z-20 shadow-l"
      >
        <My-svg-icon
          @click="handleShowSideBar"
          class="w-1.5 h-1.5 dark:text-zinc-900"
          name="navigation"
        ></My-svg-icon>
      </li>
      <li
        class="absolute rounded-sm h-[22px] top-[16px] bg-zinc-300 duration-200"
        :style="liStyle"
      ></li>
    </ul>
    <Teleport to="body">
      <My-mask-dialog
        :renderList="useNavigationStore.Navigation"
        :show="useNavigationStore.showNavigation"
        :currentIndex="useNavigationStore.currentIndex"
        @changeShowSideStatus="handleShowSideBar"
        @changeCurrentActiveIndex="handelCurrentIndexChange"
      />
    </Teleport>
  </div>
</template>

<script setup>
import useNavigation from '@/store/navigation/index.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const useNavigationStore = useNavigation()
useNavigationStore.getNavigationData()
const router = useRouter()
const handleShowSideBar = () => {
  useNavigationStore.changeShowNavigationMaskDialog()
}
const handelCurrentIndexChange = (index, item) => {
  useNavigationStore.changeCurrentActiveIndex(index, item.id)
}
const liStyle = ref({
  width: '60px',
  transform: 'translateX(0px)'
})
const SiderFunction = (index, path) => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
  useNavigationStore.currentIndex = index
  router.push(path)
}
</script>

<style lang="scss" scoped></style>
